<template>
  <div class>
    <!-- <h3>index...</h3> -->

    <button @click="gets()">点击发送ajax -- get</button>

    <button @click="jsonps1()">点击发送ajax -- 设置本地api代理（解决跨域） -- get</button>
    <button @click="jsonps2()">点击发送ajax -- 设置本地api代理（解决跨域） -- post</button>
  </div>
</template>

<script>
import qs from "qs";
import { Toast, Indicator } from "mint-ui";
export default {
  name: "",
  data() {
    return {
      url1: "http://vue1906.strive1.top/data_all.php",
      url2: "http://vue1906.strive1.top/data_get.php"
    };
  },
  methods: {
    gets() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      setTimeout(() => {
        this.$axios
          .get(this.url1, { params: { id: 1, name: "zhangsan" } })
          .then(res => {
            console.log(res.data);
          })
          .catch(err => {
            console.log("加载失败了");
          })
          .finally(() => {
            //Toast("加载成功");
            Indicator.close();
          });
      }, 2000);
    },
    jsonps1() {
      this.$axios
        .get("/api/data_get.php", { params: { id: 1, name: "zhangsan" } })
        .then(res => {
          console.log(res);
        });
    },
    jsonps2() {
      //   使用qs 组件对发送post数据 进行安全处理
      const data = qs.stringify({ uname: "root@qq.com", upass: "@123456" });

      this.$axios.post("/api/data_post.php", data).then(res => {
        console.log(res);
      });
    }
  },
  components: {}
};
</script>

<style scoped>
</style>
